<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="zhuce.css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2819639_vxi33nu6nci.css" />
    <script src="./jQuery.min.js"></script>
    <script src="denglu.js"></script>
  </head>

  <body>
    <div class="leftimge"><img src="imge/tu51.jpg" alt="" /></div>
    <div class="main">
      <div class="top">
        <div class="top-left">
          <a href="xiaomiguawang.html">
            <img src="imge/logo-mi2.png" alt="" />
          </a>
          <p>小米账号</p>
        </div>
        <div class="top-right">
          <ul>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>帮助中心</li>
            <li style="font-weight: 200; opacity: 0.5">|</li>
            <li>中文(简体)</li>
          </ul>
        </div>
      </div>
      <div class="content">
        <div class="main-content">
          <div class="denglu-word"><a href="denglu.html">登录</a><a href="#">注册</a></div>
          <ul class="denglu-list">
            <li>
              <div class="q2">手机号</div>
              <input class="q1" type="text" />
            </li>
            <li>
              <span class="iconfont icon-biyanjing"></span>
              <div class="q2">密码</div>
              <input class="q1" type="password" />
            </li>
            <li>
              <div class="huoqu">获取验证码</div>
              <div class="q2">验证码</div>
              <input class="q1" type="text" />
            </li>
            <li><input class="tongyi1" type="checkbox" /> 已阅读并同意小米帐号 用户协议和隐私政策</li>
            <li class="zhuce">
              <div class="tongyi">
                <span style="color: #ff6900" class="iconfont icon-jingshi"></span> 请同意用户条款
              </div>
              注册
            </li>
            <li>
              <div class="left-1">忘记密码？</div>
              <div class="right-1">手机号登录</div>
            </li>
            <li>其他方式登录</li>
            <li>
              <span class="iconfont icon-zhifubao"></span>
              <span class="iconfont icon-weixin"></span>
              <span class="iconfont icon-QQ-circle-fill"></span>
              <span class="iconfont icon-shejiaotubiao-42"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      var flag = 1
      var str
      $('.huoqu').click(function () {
        if (flag === 1) {
          flag = 0
          if (
            $('.q1').eq(0).val().length == 11 &&
            !isNaN($('.q1').eq(0).val()) &&
            $('.q1').eq(1).val().length >= 5 &&
            $('.q1').eq(1).val().length <= 16
          ) {
            str = String(Math.random()).substr(2, 6)
            alert(str)
            var a = 3
            var timer = setInterval(function () {
              $('.huoqu').text('重新获取(' + a + 's)')
              if (a < 0) {
                clearInterval(timer)
                flag = 1
                $('.huoqu').text('获取验证码')
              } else {
                a--
              }
            }, 1000)
          } else {
            flag = 1
            if (!($('.q1').eq(0).val().length == 11 && !isNaN($('.q1').eq(0).val()))) {
              $('.q1').eq(0).prev().css({
                color: '#ff5c00'
              })
              $('.q1').eq(0).parent().css({
                backgroundColor: 'rgb(252, 242, 243)'
              })
              if ($('.q1').eq(0).attr('flag') == 1) {
                $('.q1').eq(0).attr('flag', 0)
                if ($('.q1').eq(1).val()) {
                  $('.q1')
                    .eq(0)
                    .parent()
                    .append(
                      "<li style='color:#f04645;font-size:12px;'>" +
                        $('.q1').eq(0).prev().text() +
                        '格式不正确</li>'
                    )
                } else {
                  $('.q1')
                    .eq(0)
                    .parent()
                    .append(
                      "<li style='color:#f04645;font-size:12px;'>请输入" + $('.q1').eq(0).prev().text() + '</li>'
                    )
                }
              }
            } else {
              $('.q1').eq(1).prev().css({
                color: '#ff5c00'
              })
              $('.q1').eq(1).parent().css({
                backgroundColor: 'rgb(252, 242, 243)'
              })
              if ($('.q1').eq(1).attr('flag') == 1) {
                $('.q1').eq(1).attr('flag', 0)
                if ($('.q1').eq(1).val()) {
                  $('.q1')
                    .eq(1)
                    .parent()
                    .append(
                      "<li style='color:#f04645;font-size:12px;'>" +
                        $('.q1').eq(1).prev().text() +
                        '格式不正确</li>'
                    )
                } else {
                  $('.q1')
                    .eq(1)
                    .parent()
                    .append(
                      "<li style='color:#f04645;font-size:12px;'>请输入" + $('.q1').eq(1).prev().text() + '</li>'
                    )
                }
              }
            }
          }
        }
      })
      $('.q1')
        .eq(2)
        .on('input', function () {
          if ($(this).val()) {
            $('.zhuce').css('backgroundColor', '#ff5c00')
          } else {
            $('.zhuce').css('backgroundColor', '#ffbe99')
          }
        })
      $('.zhuce').click(function () {
        var arr = getData()
        for (var i = 0; i < arr.length; i++) {
          if ($('.q1').eq(0).val() == arr[i].zhanghao) {
            alert('该账号已注册')
            return
          }
        }
        if ($('.q1').eq(2).val() == str && $('.tongyi1').prop('checked')) {
          arr.push({
            zhanghao: $('.q1').eq(0).val(),
            mima: $('.q1').eq(1).val()
          })
          save(arr)
          alert('注册成功')
        } else {
          if (!$('.tongyi1').prop('checked')) {
            $('.tongyi').stop().fadeIn()
            var timer = setInterval(function () {
              $('.tongyi').stop().fadeOut()
              clearInterval(timer)
            }, 2000)
          }
        }
      })
      function getData() {
        if (localStorage.getItem('yonghu')) {
          return JSON.parse(localStorage.getItem('yonghu'))
        } else {
          return []
        }
      }
      function save(arr) {
        localStorage.setItem('yonghu', JSON.stringify(arr))
      }
    </script>
  </body>
</html>
